<template>
    <div class="yinsi">
        <div class="header">
            <div class="innerBox">

                <div class="header-logo">
                    <!-- <img src="../../static/imgs/logo.png" alt=""> -->
                    <div class="title"> {{ $t('assemble.网易标签订购系统') }}<span style="font-size:15px;">V2.0</span> </div>

                </div>
                <div class="header-content">
                    <div class="header-content-left">
                        <div class="line"></div>
                        <div class="curpointer" @click="handleclick">{{ $t('assemble.采购') }}</div>
                        <div class="curpointer" @click="handleclick">{{ $t('assemble.订单管理') }}</div>

                        <div class="curpointer" @click="handleclick">{{ $t('assemble.账号中心') }}</div>
                    </div>
                    <div class="header-content-rigth">
                        <el-badge class="item">
                            <div class="curpointer newbtn" @click="handleclick">{{ $t('assemble.消息通知') }}</div>
                        </el-badge>

                        <div class="curpointer" @click="handleclick">{{ $t('assemble.退出登录') }}</div>
                    </div>

                </div>
            </div>
        </div>
        <div style="height: 88px;"></div>

        <div v-html="content" style="width: 1000px;">

        </div>
        <div style="height: 184px;"></div>
        <div class="footer">
            <div class="footer-list">
                <p @click="handleclick">{{ $t('assemble.关于我们') }}</p>
                <p @click="handleclick">{{ $t('assemble.意见反馈') }}</p>
                <p @click="handleclick">{{ $t('assemble.隐私政策') }}</p>
                <p @click="handleclick">{{ $t('assemble.用户协议') }}</p>
                <p @click="handleclick">{{ $t('assemble.联系我们') }}</p>
                <p @click="handleclick">{{ $t('assemble.用户手册') }}</p>
            </div>
            <div class="footer-text">
                <div class="curpointer">Copyright ©spsolsys.com</div>
            </div>

        </div>

        <el-dialog :title="$t('assemble.提示')" :visible.sync="centerDialogVisible" width="30%" center>
            <span class="tishitext">{{ $t('assemble.请登录后操作') }}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">{{ $t('assemble.取消') }}</el-button>
                <el-button type="primary" @click="gotologin">{{ $t('assemble.确定') }}</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { onepage } from ".././../utils/api"
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue';
export default {
    components: {
        Header,
        Footer
    },
    data() {
        return {
            content: "",
            centerDialogVisible: false

        }
    },
    created() {
        let type = this.$route.query.type
        console.log("type", type)
        if (type == "1") {
            this.getyinsi("privacy")
        }
        if (type == "0") {
            this.getyinsi("server")

        }
    },
    mounted() {
        // this.getyinsi()
    },
    methods: {
        async getyinsi(val) {
            let res = await onepage({
                name: val
            })
            console.log("res", res)
            if (res.code == 1) {
                console.log("关于我们", res)
                this.content = res.data
            }
            if (res.code == 401) {
                this.$router.push({ path: '/login' })
            }
        },

        handleclick() {
            this.centerDialogVisible = true
        },
        gotologin() {
            this.$router.push({ path: '/login' })
        }
    },

}
</script>

<style scoped lang="scss">
.yinsi {
    display: flex;
    flex-direction: column;
    align-items: center;

    .header {
        width: 100%;
        height: 60px;
        background: #E00000;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        padding: 12px 85px;
        box-sizing: border-box;
        display: flex;
        position: fixed;
        top: 0;
        z-index: 99;

        .innerBox {
            width: 1200px;
            margin: 0 auto;
            // background-color: pink;
            padding: 12px 85px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            top: 0;
            z-index: 99;


            .header-logo {
                // width: 158.42px;
                height: 56px;
                cursor: pointer;
                margin-top: 25px;

                .title {
                    // width: 387px;
                    height: 21px;
                    font-size: 18px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: white;
                    line-height: 28px;
                    font-weight: bolder;
                }

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .header-content {
                display: flex;
                flex: 1;
                justify-content: space-between;

                .header-content-left {
                    width: 280px;
                    display: flex;
                    font-size: 15px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 23px;
                    align-items: center;
                    justify-content: space-between;
                    margin-left: 35px;

                    .line {
                        width: 1px;
                        // height: 40px;
                        opacity: 1;
                        background-color: #FFFFFF;
                    }

                }

                .curpointer {
                    cursor: pointer;
                }

                .header-content-rigth {
                    width: 166px;
                    display: flex;
                    font-size: 14px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    // line-height: 50px;
                    // margin-top: 21px;
                    justify-content: space-between;
                    position: relative;

                    .newslist {
                        width: 440px;
                        background: #F8F8F8;
                        border-radius: 0px 0px 10px 10px;
                        position: absolute;
                        right: -84px;
                        top: 50px;
                        padding: 20px;
                        box-sizing: border-box;
                        // display: block;


                        .newsitem {
                            width: 400px;
                            // height: 140px;
                            background: #FFFFFF;
                            border-radius: 10px 10px 10px 10px;
                            opacity: 1;
                            margin-bottom: 20px;
                            font-size: 14px;
                            font-family: PingFang SC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #B1B1B1;
                            line-height: 16px;
                            padding: 5px 20px;
                            box-sizing: border-box;
                            cursor: pointer;

                            .title {
                                width: 350px;
                                font-size: 16px;
                                font-family: PingFang SC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #333333;
                                line-height: 19px;
                                word-wrap: break-word;
                            }

                            .bottombox {
                                display: flex;
                                justify-content: space-between;
                            }
                        }
                    }


                }
            }
        }
    }

    .tishitext {
        display: block;
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }

    .footer {
        width: 100%;
        // height: 164px;
        background: #272A2C;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        position: fixed;
        bottom: 0;
        // padding: 50px 393px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        .footer-list {
            width: 1200px;
            font-size: 16px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 19px;
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
            font-size: 15px;

            p {
                cursor: pointer;
            }
        }

        .footer-text {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #B1B1B1;
            line-height: 16px;
            margin: 10px auto;
        }
    }


}
</style>